<template>
	<view class="_cart _p10">
		<view class="_wrapper-x _flex _flex-end _flex-space-x _m-b-10">
			<template v-for="item in commonQuery" :key="item.name">
				<view class="_m-l-5 _box-x-200p">
					<n-com-select :dictList="item.dictList" v-model="rules[`${item.name}__eq`]"></n-com-select>
				</view>
			</template>
			<button class="uni-button hide-on-phone" type="default" size="mini"
				@click="loadData">{{$t('common.button.search')}}</button>
			<button class="uni-button" type="primary" size="mini"
				@click="$toolUni.toPage(`/pages/common/update?code=${code}`)">{{$t('common.button.add')}}</button>
			<button class="uni-button" type="warn" size="mini" :disabled="!selectedIndexs.length"
				@click="removeAll">{{$t('common.button.batchDelete')}}</button>
			<NUniExportExcel :exportExcelData="dataList" :fields="exportFields" />
		</view>
		<el-table :data="dataList" border style="width: 100%" stripe row-key="id" size="small">
			<template v-for="(meta, _index) in fields" :key="_index">
				<el-table-column :prop="meta.name" :label="meta.memo || meta.name" :show-overflow-tooltip="true">
					<template #default="scope">
						<template v-if="meta.dictList">
							{{transformDict(meta.dictList, scope.row[meta.name])}}
						</template>
						<template v-else-if="meta.type === 3">
							<uni-dateformat :date="scope.row[meta.name]"></uni-dateformat>
						</template>
						<template v-else-if="meta.type === 140">
							<n-tags-select :disable="true" v-model:checks="scope.row[meta.name]" />
						</template>
						<template v-else-if="meta.type === 150">
							<n-param-select v-model:defaultIds="scope.row[meta.name]"></n-param-select>
						</template>
						<template v-else-if="[110, 111].includes(meta.type)">
							<com-img v-model:value="scope.row[meta.name]" />
						</template>
						<template v-else>
							<span v-copyClipboard="scope.row[meta.name]">{{scope.row[meta.name]}}</span>
						</template>
					</template>
				</el-table-column>
			</template>
			<el-table-column fixed="right" label="操作" width="120">
				<template #default="scope">
					<view class="uni-group">
						<button @click="$toolUni.toPage(`/pages/common/update?code=${code}&id=${scope.row.id}`)" class="uni-button"
							size="mini" type="primary">{{$t('common.button.edit')}}</button>
						<button @click="remove(scope.row)" class="uni-button" size="mini"
							type="warn">{{$t('common.button.delete')}}</button>
					</view>
				</template>
			</el-table-column>
		</el-table>
		<NUniPage ref="NUniPage" :total="dataTotal" @load="loadData()"></NUniPage>
	</view>
</template>

<script>
	import ToolAction from "@/tool/http/tool-action.js";
	import NUniPage from "@/components/n-uni-page/NUniPage.vue";
	import NUniExportExcel from "@/components/n-uni-export/NUniExportExcel.vue";
	import extension from "@/pages/common/extension.js";
	import toolTree from "@/tool/tool-tree";
	// import pluginPack from "./plugin-pack/plugin-pack.vue";

	let api;

	export default {
		components: {
			NUniPage,
			NUniExportExcel
		},
		props: {
			tableCode: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				ruleConfig: {
					baseField: [],
					extendFields: []
				},
				dataList: [],
				dataTotal: 0,
				selectedIndexs: [],
				metadata: [],
				code: this.$route.query.code || this.tableCode,
				rules: {}
			}
		},
		computed: {
			commonQuery() {
				return this.fields.filter(item => item && item.dictList && item.dictList.length > 0);
			},
			fields() {
				return [...this.ruleConfig.baseField, ...this.metadata.filter(_item => !_item.hidden), ...this.ruleConfig
					.extendFields
				];
			},
			exportFields() {
				let fields = {};
				this.metadata.forEach(meta => {
					fields[meta.memo || meta.name] = meta.name;
				})
				return fields;
			}
		},
		async mounted() {
			api = ToolAction.init(this.code);
			await this.loadMetaData();
			this.loadData();
			uni.$on('commonLoadData', data => {
				if (this.$refs.NUniPage) {
					this.$refs.NUniPage.reset();
					this.loadData();
				}
			})
		},
		methods: {
			transformDict(dictList, rawVal) {
				if (!dictList) {
					return rawVal;
				}
				let dictAllList = toolTree.treeToList(dictList);
				let vals = (rawVal + "").toString().split(",");
				return vals.map(val => {
					let dictRes = dictAllList.filter(dict => dict.val.toString() === val);
					if (dictRes.length < 1) {
						return rawVal;
					}
					return dictRes[0].name;
				}).join(',')
			},
			async loadMetaData() {
				let res = await api.meta();
				this.ruleConfig = await extension.init(this.code, res);
				this.metadata = res;
			},
			loadData() {
				(this.ruleConfig.loadData || api.page)({
					page: this.$refs.NUniPage.pageInfo(),
					rules: this.$tool.objClear(this.rules)
				}).then(async res => {
					let records = res.records || res;
					// 初始化列表扩展字段 - 根据数据扩展
					this.ruleConfig.listFieldExtend(records).then(() => {
						this.dataList = [...records];
						this.ruleConfig = {
							...this.ruleConfig
						};
					});
					this.dataList = records;
					this.dataTotal = res.total || records.length;
				});
			},
			remove(item) {
				api.remove(item).then(res => {
					this.loadData();
				});
			},
			removeAll() {

			},
			selectionChange(e) {
				this.selectedIndexs = e.detail.index
			},
			sortChange(e, name) {
				this.orderByFieldName = name;
				if (e.order) {
					this.orderby = name + ' ' + orderByMapping[e.order]
				} else {
					this.orderby = ''
				}
				this.$refs.table.clearSelection()
				this.$nextTick(() => {
					this.$refs.udb.loadData()
				})
			},
		}
	}
</script>

<style>
</style>
